<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			body {
				margin: 0;
			}

			#map {
				position: relative;
				border: 1px solid red;
				width: 500px;
				height: 800px;
			}
		</style>
	</head>
	<body>
		<div id="map">

		</div>
		<script src="./monster.js"></script>
		<script>
			const map = document.getElementById('map') // getElementById通过ID获取元素
			const mapInfo = document.querySelectorAll('#map') //获取元素的信息
			const mapTop = mapInfo[0].offsetTop
			let bulletTimer = null
			let emitting = false

			class Plane {
				constructor() {
					//飞机
					this.width = 30
					this.color = 'blue'
					this.left = 250 - this.width / 2
					this.top = 800 - this.width
					this.direction = ''
					this.marker = null //标记当前飞机
					this.blood = 10;
					//子弹
					this.bulletWidth = 10
					this.bulletColor = 'red'
					this.bulletArr = []
					this.bulletInterval = 100
				}
				//画飞机
				draw() {
					const plane = document.createElement('div')
					plane.style.width = this.width + 'px'
					plane.style.height = this.width + 'px'
					plane.style.background = 'url(./image/plane.png)'
					plane.style.backgroundSize = '30px 30px'
					plane.style.position = 'absolute'
					plane.style.top = this.top + 'px'
					plane.style.left = this.left + 'px'
					this.marker = plane
					map.appendChild(plane)
				}
				//移动飞机
				move() {
					if (this.direction == 'left') {
						this.left = this.left - this.width / 3
						map.removeChild(this.marker)
						this.draw()
					}
					if (this.direction == 'right') {
						this.left = this.left + this.width / 3
						map.removeChild(this.marker)
						this.draw()
					}
				}

				// 创建子弹
				create() {
					const left = this.left + this.bulletWidth
					const top = this.top - this.bulletWidth
					const bullet = document.createElement('div')

					this.bulletArr.push({
						left: left,
						top: top,
						node: bullet,
						isActive: true
					})
					this.renderBullet()

				}
				//画子弹
				renderBullet() {
					for (let i = 0; i < this.bulletArr.length; i++) {
						const node = this.bulletArr[i].node
						node.style.width = this.bulletWidth + 'px'
						node.style.height = this.bulletWidth + 'px'
						node.style.background = 'url(./image/bullet.png)'
						node.style.backgroundSize = '10px 10px'
						node.style.position = 'absolute'
						node.style.left = this.bulletArr[i].left + 'px'
						node.style.top = this.bulletArr[i].top + 'px'
						map.appendChild(node)
					}
				}
				
				// 清除数组里死掉的子弹
				cleatDieBullet() {
					this.bulletArr = this.bulletArr.filter(item => item.isActive)
				}
				//清除原来的子弹
				clearBullet() {
					for (let i = 0; i < this.bulletArr.length; i++) {
						if (this.bulletArr[i].node && !this.bulletArr[i].isActive) {
							map.removeChild(this.bulletArr[i].node)
						}
					}
				}
				//飞机射击
				shooting() {
					for (let i = 0; i < this.bulletArr.length; i++) {
						this.bulletArr[i].top -= this.bulletWidth

						if (this.bulletArr[i].top == mapTop) {
							map.removeChild(this.bulletArr[i].node)
							this.bulletArr[i].isActive = false
						} else {
							for (let j = 0; j < monster.monsterArr.length; j++) {

								if (
									(monster.monsterArr[j].top + monster.width) >= this.bulletArr[i].top &&
									(
										this.bulletArr[i].left + this.bulletWidth > monster.monsterArr[j].left &&
										this.bulletArr[i].left < monster.monsterArr[j].left + monster.width)
								) {
									map.removeChild(this.bulletArr[i].node)
									this.bulletArr[i].isActive = false

									map.removeChild(monster.monsterArr[j].node)
									monster.monsterArr.splice(j, 1)
								}
							}

						}
					}
					this.cleatDieBullet()
					this.clearBullet()
					this.renderBullet()
				}
			}

			//监听方向键并根据方向移动飞机
			//发射子弹
			document.addEventListener('keydown', function(e) {
				const keycode = e.keyCode
				//设置方向并移动飞机
				if (keycode == 37) {
					plane.direction = 'left'
					if(plane.left <= 0)  return
					plane.move()
				}
				if (keycode == 39) {
					plane.direction = 'right'
					if(plane.left + plane.width >= 500)  return
					plane.move()
				}
			})

			const plane = new Plane()
			const monster = new Monster()
			plane.draw()
			setInterval(() => {
				plane.create()
				plane.shooting()
			}, 100)
			monster.createMonsterBirthPosition()
			setInterval(() => {
				monster.createMonster()
			}, 2000)
			monster.monsterMove()
		</script>
	</body>
</html>
